<template>
    <div class="container">
        <h1 class="title">查单系统</h1>
        <div class="form-content">
            <form class="form">
                <div class="form-group">
                    <input v-model="username" placeholder="请输入用户名" type="text">
                    <div class="icon" @click="cancelName">
                        <i class="iconfont icon-close"></i>
                    </div>
                </div>
                <div class="form-group">
                    <input v-model="password" placeholder="请输入密码" :type="see?'text':'password'">
                    <div class="icon" @touchstart='see=true' @touchend="see=false">
                        <i class="iconfont" :class="see?'icon-in_zhengyan':'icon-guanbi-yanjing'"></i>
                    </div>
                </div>
            </form>
        </div>
        <div class="login">
            <button type="button" @click="login" class="login-btn">登录</button>
        </div>
        <modal class="modal" v-if="showModal" @close="showModal = false">
            <span slot="header"></span>
            <span slot="body">
                {{message}}
            </span>
            <div slot="footer">
                <button class="modal-default-button" @click="showModal = false">
                    OK
                </button>
            </div>
        </modal>
    </div>
</template>

<script type="text/ecamscript-6">
import modal from "@/base/modal/modal";
export default {
  data() {
    return {
      see: false,
      username: "",
      password: "",
      showModal: false,
      message: "",
    };
  },
  components: {
    modal
  },
  methods: {
    cancelName() {
      this.username = "";
    },
    login() {
      if (!this.username || !this.password) {
        this.showModal = true;
        this.message = "用户名或者密码不能为空";
      } else {
        this.$axios({
          method: "post",
          url: "http://47.104.186.142:80/delivery/accConfirm",
          params: {
            acc_name: this.username,
            acc_psd: this.password
          }
        }).then(res => {
          //console.log(res.data);
          if (res.data.data.flag == 1) {
              localStorage.setItem("setUserCommName",res.data.data.comm_name);
              localStorage.setItem("setUserName",this.username);
              sessionStorage.setItem("setUserName",this.username);
              this.$router.push({
                   path: "/orders"
              });
          } else {
            this.showModal = true;
            this.message = "用户名或密码不匹配，请重试";
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin';

.container {
    padding: 100px 28px;

    .title {
        color: #333;
        font-size: 20px;
        text-align: center;
    }

    .form-content {
        margin: 44px 0;

        .form-group {
            position: relative;
            margin-bottom: 20px;

            input {
                display: block;
                border: 1px solid #333;
                outline: none;
                border-radius: 30px;
                height: 45px;
                line-height: 45px;
                width: 100%;
                padding: 0 25px;
                color: #666;

                &:focus {
                    border-color: #f20c00;
                }
            }

            .icon {
                position: absolute;
                right: 25px;
                top: 50%;
                transform: translateY(-50%);

                .iconfont {
                    extent-click();
                }
            }
        }
    }

    .login {
        .login-btn {
            display: block;
            height: 45px;
            width: 100%;
            outline: none;
            border: none;
            border-radius: 30px;
            color: #ffffff;
            font-size: 17px;
            line-height: 45px;
            background-color: #f20c00;
        }
    }

    .modal {
        .modal-default-button {
            float: right;
            color: #fff;
            background-color: #4aae9b;
            border: 1px solid #4aae9b;
            border-radius: 2px;
            background-color: #4dae9b;
            extent-click();
        }
    }
}
</style>